<template>
  <div @touchmove="touchmove">
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '100%' }"
    >
      <van-nav-bar
        title="订单信息"
        left-text="返回"
        left-arrow
        @click-left="leftclick"
      />

      <div class="formalOrderBox">
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="boxOrderFormal"
            v-for="item in data"
            :key="item.Id"
            @click="deils(item)"
          >
            <div class="companyOrderName">{{ item.cCusName }}</div>
            <div class="Ordercode">
              <div style="padding-right: 30px">订单号:{{ item.cSOCode }}</div>
              <div>编码:{{ item.cCusCode }}</div>
            </div>
          </div>
        </van-list>
      </div>

      <!-- <Formdetails ref="formdetails" /> -->
    </van-popup>
  </div>
</template>

<script>
// import Formdetails from "../Transaction/Formdetails";

import { Card } from "vant";
import { Search, Tag, NavBar, Dialog, SwipeCell, Icon, Pagination } from "vant";

export default {
  components: {
    "van-tag": Tag,
    "van-icon": Icon,
    "van-pagination": Pagination,
    "van-swipe-cell": SwipeCell,
    "van-nav-bar": NavBar,
    "van-card": Card,
    "van-search": Search
    // Formdetails
  },
  data() {
    return {
      loading: false,
      finished: false,
      pagination: {
        current: 1,
        pageSize: 15,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ["15", "30", "60"], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      show: false,
      Total: 0,
      Keyword: "",
      data: [],
      pageNo: 1,
      PageRows: 10,
      queryParam: {},
      code: ""
    };
  },
  created() {
    // this.getDataList();

    this.openForm(this.$route.query.cCusCode);
  },
  methods: {
    leftclick() {
      this.$router.go(-1);
    },
    onLoad() {
      this.loading = false;
      console.log("111");
      this.PageRows += 20;
      this.getDataList(this.code);
    },
    swipeleft() {
      this.show = false;
    },
    touchstart(e) {
      // alert("123");

      // e.preventDefault();

      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
    },
    touchmove(e) {
      //  this.show = false;
      // e.preventDefault();
      this.moveX = e.touches[0].clientX;
      this.moveY = e.touches[0].clientY;
    },

    deils(item) {
      console.log(item);
      this.$router.push({
        path: "/transaction/Formdetails",
        query: { Id: item.ID }
      });

      // this.$refs.formdetails.openForm(item);
    },

    tableClick(Subitem) {
      this.$refs.viewdetails.openForm(Subitem);
    },

    paginationchange(a) {
      // a:当前选中页码
      this.pagination.current = a;
      this.getDataList();
    },
    btn(id) {
      Dialog.confirm({
        message: "确定要删除吗",
        confirmButtonColor: "#1989fa"
      })
        .then(() => {
          this.http
            .post(
              "/QuotationManagement/Quot_OfferSheetMain/DeleteDataOfAll",
              id
            )
            .then(resJson => {
              if (resJson.Success) {
                this.$toast("删除成功");
                this.getDataList();
              } else {
                this.$toast("删除失败");
              }
            });
        })
        .catch(() => {
          console.log(123);
        });
    },
    clear() {
      console.log(123);
      this.queryParam = {};
      this.getDataList();
    },

    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$refs.edit.openForm();
    },
    //弹出页面
    Edit(Id) {
      this.$refs.edit.openForm(Id);
    },
    //搜索
    search(value) {
      console.log(value);
      this.queryParam.Condition = "cCusName";
      this.queryParam.Keyword = value;
      this.getDataList();
    },
    openForm(code) {
      this.show = true;
      this.code = code;
      this.getDataList(code);
    },
    getDataList(code) {
      this.loading = true;
      this.http
        .post("/OrderManagement/SO_SOMain/GetDataListByCustAndDate", {
          PageIndex: this.pageNo,
          PageRows: this.PageRows,

          Search: { CustomerId: code }
        })
        .then(resJson => {
          this.loading = false;
          this.data = resJson.Data;
          this.Total = resJson.Data.Total;
          if (this.data.length >= resJson.Total) {
            this.finished = true;
          }
        });
    }
  }
};
</script>

<style>
.Ordercode {
  display: flex;
  justify-content: start;
  margin-left: 10px;
  color: #777;
}

.formalOrderBox {
  height: calc(100vh - 50px);

  box-sizing: border-box;
  overflow: auto;
}

.companyOrderName {
  padding-top: 10px;
  margin-left: 10px;
  margin-bottom: 5px;
  color: #000000;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.8;
}

.boxOrderFormal {
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  position: relative;

  width: 95%;

  padding-bottom: 10px;
  margin: 3px auto;
  margin-bottom: 10px;
}
</style>
